<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>vue使用 | 沧海的雨季</title>
    <meta name="description" content="记录日常所得">


    <link rel="preload" href="/blog/assets/css/0.styles.115a353e.css" as="style">
    <link rel="preload" href="/blog/assets/js/app.55c22b96.js" as="script">
    <link rel="preload" href="/blog/assets/js/17.1e598d09.js" as="script">
    <link rel="prefetch" href="/blog/assets/js/10.e61d0699.js">
    <link rel="prefetch" href="/blog/assets/js/11.585629e5.js">
    <link rel="prefetch" href="/blog/assets/js/12.bbe8d2ad.js">
    <link rel="prefetch" href="/blog/assets/js/13.71e62645.js">
    <link rel="prefetch" href="/blog/assets/js/14.0144eba5.js">
    <link rel="prefetch" href="/blog/assets/js/15.b46c4858.js">
    <link rel="prefetch" href="/blog/assets/js/16.e18a50bd.js">
    <link rel="prefetch" href="/blog/assets/js/18.96899c7a.js">
    <link rel="prefetch" href="/blog/assets/js/19.7c3c2154.js">
    <link rel="prefetch" href="/blog/assets/js/2.3237a83b.js">
    <link rel="prefetch" href="/blog/assets/js/20.e6ae0308.js">
    <link rel="prefetch" href="/blog/assets/js/21.4d40a166.js">
    <link rel="prefetch" href="/blog/assets/js/22.645bbf59.js">
    <link rel="prefetch" href="/blog/assets/js/23.9cd828ab.js">
    <link rel="prefetch" href="/blog/assets/js/24.69e14e8a.js">
    <link rel="prefetch" href="/blog/assets/js/25.f5b491c6.js">
    <link rel="prefetch" href="/blog/assets/js/26.373d9108.js">
    <link rel="prefetch" href="/blog/assets/js/27.b545bd48.js">
    <link rel="prefetch" href="/blog/assets/js/28.92d96b8f.js">
    <link rel="prefetch" href="/blog/assets/js/29.2fbc39ec.js">
    <link rel="prefetch" href="/blog/assets/js/3.164ee93a.js">
    <link rel="prefetch" href="/blog/assets/js/4.33328b51.js">
    <link rel="prefetch" href="/blog/assets/js/5.6a028867.js">
    <link rel="prefetch" href="/blog/assets/js/6.f3345864.js">
    <link rel="prefetch" href="/blog/assets/js/7.7a2d6fe6.js">
    <link rel="prefetch" href="/blog/assets/js/8.84efcb24.js">
    <link rel="prefetch" href="/blog/assets/js/9.38c24ce0.js">
    <link rel="stylesheet" href="/blog/assets/css/0.styles.115a353e.css">
</head>
<body>
<div id="app" data-server-rendered="true">
    <div class="theme-container">
        <header class="navbar">
            <div class="sidebar-button">
                <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512"
                     class="icon">
                    <path fill="currentColor"
                          d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path>
                </svg>
            </div>
            <a href="/blog/" class="home-link router-link-active"><!----> <span class="site-name">沧海的雨季</span></a>
            <div class="links" style="max-width:nullpx;">
                <div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value="">
                    <!----></div>
                <nav class="nav-links can-hide">
                    <div class="nav-item">
                        <div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">面试题库</span> <span
                                class="arrow right"></span></a>
                            <ul class="nav-dropdown" style="display:none;">
                                <li class="dropdown-item"><!----> <a href="/blog/面试题库/基础面试题.html"
                                                                     class="nav-link">基础面试</a></li>
                                <li class="dropdown-item"><!----> <a href="/blog/面试题库/Vue.html" class="nav-link">Vue常考面试题</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="nav-item">
                        <div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">CSS</span> <span
                                class="arrow right"></span></a>
                            <ul class="nav-dropdown" style="display:none;">
                                <li class="dropdown-item"><!----> <a href="/blog/CSS/css常用代码/" class="nav-link">常用代码</a>
                                </li>
                                <li class="dropdown-item"><!----> <a href="/blog/CSS/css常用技巧/" class="nav-link">技巧</a>
                                </li>
                                <li class="dropdown-item"><!----> <a href="/blog/CSS/stylus/"
                                                                     class="nav-link">stylus</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="nav-item">
                        <div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">JavaScript</span>
                            <span class="arrow right"></span></a>
                            <ul class="nav-dropdown" style="display:none;">
                                <li class="dropdown-item"><!----> <a href="/blog/JavaScript/常用代码/"
                                                                     class="nav-link">常用代码</a></li>
                                <li class="dropdown-item"><!----> <a href="/blog/JavaScript/技巧/" class="nav-link">技巧</a>
                                </li>
                                <li class="dropdown-item"><!----> <a href="/blog/JavaScript/JavaScript高级程序设计/"
                                                                     class="nav-link">JavaScript高级程序设计</a></li>
                                <li class="dropdown-item"><!----> <a href="/blog/JavaScript/ES6/" class="nav-link">深入理解ES6</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="nav-item">
                        <div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">Vue</span> <span
                                class="arrow right"></span></a>
                            <ul class="nav-dropdown" style="display:none;">
                                <li class="dropdown-item"><!----> <a href="/blog/vue/vue使用/" class="nav-link">vue使用</a>
                                </li>
                                <li class="dropdown-item"><!----> <a href="/blog/vue/vue技巧/" class="nav-link">vue技巧</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="nav-item">
                        <div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">小程序</span> <span
                                class="arrow right"></span></a>
                            <ul class="nav-dropdown" style="display:none;">
                                <li class="dropdown-item"><!----> <a href="/blog/小程序/" class="nav-link">小程序</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="nav-item">
                        <div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">前端工具</span> <span
                                class="arrow right"></span></a>
                            <ul class="nav-dropdown" style="display:none;">
                                <li class="dropdown-item"><!----> <a href="/blog/前端工具/git/" class="nav-link">Git</a>
                                </li>
                                <li class="dropdown-item"><!----> <a href="/blog/前端工具/webpack/"
                                                                     class="nav-link">webpack</a></li>
                                <li class="dropdown-item"><!----> <a href="/blog/前端工具/chrome调试/" class="nav-link">chrome调试</a>
                                </li>
                                <li class="dropdown-item"><!----> <a href="/blog/前端工具/linux命令/"
                                                                     class="nav-link">linux命令</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="nav-item">
                        <div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">TypeScript</span>
                            <span class="arrow right"></span></a>
                            <ul class="nav-dropdown" style="display:none;">
                                <li class="dropdown-item"><!----> <a href="/blog/TypeScript/" class="nav-link">TypeScript</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="nav-item">
                        <div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">Node.js</span> <span
                                class="arrow right"></span></a>
                            <ul class="nav-dropdown" style="display:none;">
                                <li class="dropdown-item"><!----> <a
                                        href="/blog/Node.js/Node.js从零开发Web Server博客项目 前端晋升全栈工程师必备/" class="nav-link">Node.js从零开发Web
                                    Server博客项目</a></li>
                                <li class="dropdown-item"><!----> <a
                                        href="/blog/Node.js/Node.js+KOA2 从0到1打造超好用Web框架一步到位 掌握KOA2服务端开发/"
                                        class="nav-link">Node.js+KOA2 从0到1打造超好用Web框架一步到位</a></li>
                                <li class="dropdown-item"><!----> <a href="/blog/Vue全家桶+SSR+Koa2全栈开发美团网/"
                                                                     class="nav-link">Vue全家桶+SSR+Koa2全栈开发美团网</a></li>
                            </ul>
                        </div>
                    </div>
                    <a href="https://gitee.com/l544402029/blog" target="_blank" rel="noopener noreferrer"
                       class="repo-link">
                        Github
                        <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100"
                             width="15" height="15" class="icon outbound">
                            <path fill="currentColor"
                                  d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path>
                            <polygon fill="currentColor"
                                     points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon>
                        </svg>
                    </a></nav>
            </div>
        </header>
        <div class="sidebar-mask"></div>
        <div class="sidebar">
            <nav class="nav-links">
                <div class="nav-item">
                    <div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">面试题库</span> <span
                            class="arrow right"></span></a>
                        <ul class="nav-dropdown" style="display:none;">
                            <li class="dropdown-item"><!----> <a href="/blog/面试题库/基础面试题.html" class="nav-link">基础面试</a>
                            </li>
                            <li class="dropdown-item"><!----> <a href="/blog/面试题库/Vue.html"
                                                                 class="nav-link">Vue常考面试题</a></li>
                        </ul>
                    </div>
                </div>
                <div class="nav-item">
                    <div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">CSS</span> <span
                            class="arrow right"></span></a>
                        <ul class="nav-dropdown" style="display:none;">
                            <li class="dropdown-item"><!----> <a href="/blog/CSS/css常用代码/" class="nav-link">常用代码</a>
                            </li>
                            <li class="dropdown-item"><!----> <a href="/blog/CSS/css常用技巧/" class="nav-link">技巧</a></li>
                            <li class="dropdown-item"><!----> <a href="/blog/CSS/stylus/" class="nav-link">stylus</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="nav-item">
                    <div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">JavaScript</span> <span
                            class="arrow right"></span></a>
                        <ul class="nav-dropdown" style="display:none;">
                            <li class="dropdown-item"><!----> <a href="/blog/JavaScript/常用代码/" class="nav-link">常用代码</a>
                            </li>
                            <li class="dropdown-item"><!----> <a href="/blog/JavaScript/技巧/" class="nav-link">技巧</a>
                            </li>
                            <li class="dropdown-item"><!----> <a href="/blog/JavaScript/JavaScript高级程序设计/"
                                                                 class="nav-link">JavaScript高级程序设计</a></li>
                            <li class="dropdown-item"><!----> <a href="/blog/JavaScript/ES6/"
                                                                 class="nav-link">深入理解ES6</a></li>
                        </ul>
                    </div>
                </div>
                <div class="nav-item">
                    <div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">Vue</span> <span
                            class="arrow right"></span></a>
                        <ul class="nav-dropdown" style="display:none;">
                            <li class="dropdown-item"><!----> <a href="/blog/vue/vue使用/" class="nav-link">vue使用</a></li>
                            <li class="dropdown-item"><!----> <a href="/blog/vue/vue技巧/" class="nav-link">vue技巧</a></li>
                        </ul>
                    </div>
                </div>
                <div class="nav-item">
                    <div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">小程序</span> <span
                            class="arrow right"></span></a>
                        <ul class="nav-dropdown" style="display:none;">
                            <li class="dropdown-item"><!----> <a href="/blog/小程序/" class="nav-link">小程序</a></li>
                        </ul>
                    </div>
                </div>
                <div class="nav-item">
                    <div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">前端工具</span> <span
                            class="arrow right"></span></a>
                        <ul class="nav-dropdown" style="display:none;">
                            <li class="dropdown-item"><!----> <a href="/blog/前端工具/git/" class="nav-link">Git</a></li>
                            <li class="dropdown-item"><!----> <a href="/blog/前端工具/webpack/" class="nav-link">webpack</a>
                            </li>
                            <li class="dropdown-item"><!----> <a href="/blog/前端工具/chrome调试/"
                                                                 class="nav-link">chrome调试</a></li>
                            <li class="dropdown-item"><!----> <a href="/blog/前端工具/linux命令/" class="nav-link">linux命令</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="nav-item">
                    <div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">TypeScript</span> <span
                            class="arrow right"></span></a>
                        <ul class="nav-dropdown" style="display:none;">
                            <li class="dropdown-item"><!----> <a href="/blog/TypeScript/"
                                                                 class="nav-link">TypeScript</a></li>
                        </ul>
                    </div>
                </div>
                <div class="nav-item">
                    <div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">Node.js</span> <span
                            class="arrow right"></span></a>
                        <ul class="nav-dropdown" style="display:none;">
                            <li class="dropdown-item"><!----> <a
                                    href="/blog/Node.js/Node.js从零开发Web Server博客项目 前端晋升全栈工程师必备/" class="nav-link">Node.js从零开发Web
                                Server博客项目</a></li>
                            <li class="dropdown-item"><!----> <a
                                    href="/blog/Node.js/Node.js+KOA2 从0到1打造超好用Web框架一步到位 掌握KOA2服务端开发/" class="nav-link">Node.js+KOA2
                                从0到1打造超好用Web框架一步到位</a></li>
                            <li class="dropdown-item"><!----> <a href="/blog/Vue全家桶+SSR+Koa2全栈开发美团网/" class="nav-link">Vue全家桶+SSR+Koa2全栈开发美团网</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <a href="https://gitee.com/l544402029/blog" target="_blank" rel="noopener noreferrer" class="repo-link">
                    Github
                    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100"
                         width="15" height="15" class="icon outbound">
                        <path fill="currentColor"
                              d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path>
                        <polygon fill="currentColor"
                                 points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon>
                    </svg>
                </a></nav>
            <ul class="sidebar-links">
                <li>
                    <div class="sidebar-group first"><p class="sidebar-heading open"><span>vue使用</span> <!----></p>
                        <ul class="sidebar-group-items">
                            <li><a href="/blog/vue/#创建vue项目" class="sidebar-link">创建Vue项目</a>
                                <ul class="sidebar-sub-headers">
                                    <li class="sidebar-sub-header"><a href="/blog/vue/#cube-ui使用createapi"
                                                                      class="sidebar-link">cube-ui使用createApi</a></li>
                                </ul>
                            </li>
                            <li><a href="/blog/vue/#vuex" class="sidebar-link">Vuex</a>
                                <ul class="sidebar-sub-headers"></ul>
                            </li>
                            <li><a href="/blog/vue/#vue响应式原理-双向绑定" class="sidebar-link">Vue响应式原理(双向绑定)</a>
                                <ul class="sidebar-sub-headers">
                                    <li class="sidebar-sub-header"><a href="/blog/vue/#什么是双向绑定？" class="sidebar-link">什么是双向绑定？</a>
                                    </li>
                                </ul>
                            </li>
                            <li><a href="/blog/vue/#vue简述" class="sidebar-link">vue简述</a>
                                <ul class="sidebar-sub-headers"></ul>
                            </li>
                            <li><a href="/blog/vue/#mvvm模式" class="sidebar-link">MVVM模式</a>
                                <ul class="sidebar-sub-headers">
                                    <li class="sidebar-sub-header"><a href="/blog/vue/#mvp模式"
                                                                      class="sidebar-link">MVP模式</a></li>
                                    <li class="sidebar-sub-header"><a href="/blog/vue/#mvvm模式-2" class="sidebar-link">MVVM模式</a>
                                    </li>
                                </ul>
                            </li>
                            <li><a href="/blog/vue/#组件" class="sidebar-link">组件</a>
                                <ul class="sidebar-sub-headers">
                                    <li class="sidebar-sub-header"><a href="/blog/vue/#组件间传值"
                                                                      class="sidebar-link">组件间传值</a></li>
                                    <li class="sidebar-sub-header"><a href="/blog/vue/#vue实例"
                                                                      class="sidebar-link">vue实例</a></li>
                                    <li class="sidebar-sub-header"><a href="/blog/vue/#模板语法"
                                                                      class="sidebar-link">模板语法</a></li>
                                    <li class="sidebar-sub-header"><a href="/blog/vue/#列表渲染"
                                                                      class="sidebar-link">列表渲染</a></li>
                                </ul>
                            </li>
                            <li><a href="/blog/vue/#组件-2" class="sidebar-link">组件</a>
                                <ul class="sidebar-sub-headers"></ul>
                            </li>
                            <li><a href="/blog/vue/#生命周期-2" class="sidebar-link">生命周期</a>
                                <ul class="sidebar-sub-headers">
                                    <li class="sidebar-sub-header"><a href="/blog/vue/#vuex-2"
                                                                      class="sidebar-link">vuex</a></li>
                                    <li class="sidebar-sub-header"><a href="/blog/vue/#vue-router" class="sidebar-link">Vue
                                        Router</a></li>
                                </ul>
                            </li>
                            <li><a href="/blog/vue/#搭建项目" class="sidebar-link">搭建项目</a>
                                <ul class="sidebar-sub-headers"></ul>
                            </li>
                            <li><a href="/blog/vue/#移动端布局" class="sidebar-link">移动端布局</a>
                                <ul class="sidebar-sub-headers">
                                    <li class="sidebar-sub-header"><a href="/blog/vue/#本地模拟数据" class="sidebar-link">本地模拟数据</a>
                                    </li>
                                    <li class="sidebar-sub-header"><a href="/blog/vue/#项目联调"
                                                                      class="sidebar-link">项目联调</a></li>
                                    <li class="sidebar-sub-header"><a href="/blog/vue/#jsonp原理" class="sidebar-link">jsonp原理</a>
                                    </li>
                                    <li class="sidebar-sub-header"><a href="/blog/vue/#mixin"
                                                                      class="sidebar-link">mixin</a></li>
                                    <li class="sidebar-sub-header"><a href="/blog/vue/#需要两个异步的数据同时返回"
                                                                      class="sidebar-link">需要两个异步的数据同时返回</a></li>
                                    <li class="sidebar-sub-header"><a href="/blog/vue/#防止子元素冒泡" class="sidebar-link">防止子元素冒泡</a>
                                    </li>
                                    <li class="sidebar-sub-header"><a href="/blog/vue/#vuex的使用" class="sidebar-link">vuex的使用</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
        <div class="page">
            <div class="content"><h1 id="vue使用"><a href="#vue使用" aria-hidden="true" class="header-anchor">#</a> vue使用
            </h1>
                <h2 id="创建vue项目"><a href="#创建vue项目" aria-hidden="true" class="header-anchor">#</a> 创建Vue项目</h2> <h4
                        id="使用vue-cli3创建项目"><a href="#使用vue-cli3创建项目" aria-hidden="true" class="header-anchor">#</a>
                    使用Vue CLI3创建项目</h4>
                <p><img src="https://img2018.cnblogs.com/blog/1395121/201903/1395121-20190322164600887-2112198348.png"
                        alt></p> <h4 id="查看vuecli版本"><a href="#查看vuecli版本" aria-hidden="true"
                                                        class="header-anchor">#</a> 查看vuecli版本</h4>
                <div class="language-vue extra-class"><pre class="language-vue"><code>vue --version
</code></pre>
                </div>
                <h3 id="cube-ui使用createapi"><a href="#cube-ui使用createapi" aria-hidden="true" class="header-anchor">#</a>
                    cube-ui使用createApi</h3>
                <p>main.js</p>
                <div class="language- extra-class"><pre class="language-text"><code>import {
  createAPI,
  Dialog
} from 'cube-ui'


createAPI(Vue, Dialog, ['confirm', 'click'], true)
</code></pre>
                </div>
                <p>组件内事件调用</p>
                <div class="language- extra-class"><pre class="language-text"><code>showDialog () {
  this.$createDialog({
    text: '是否清空所有搜索历史',
    confirmBtnText: '清空',
    onConfirm: () =&gt; {
      this.clearSearchHistory()
    }
  }).show()
},
</code></pre>
                </div>
                <h2 id="vuex"><a href="#vuex" aria-hidden="true" class="header-anchor">#</a> Vuex</h2>
                <p>是一种设计思想</p>
                <p><code>state</code>: 把组件的状态和数据放在同一个内存空间进行管理, <code>state</code>的数据可以很方便的映射到组件上,渲染组件</p>
                <p><code>Actions</code>: 当组件数据发生变化后,可以通过<code>dispatch</code>,<code>actions</code>可以做一些异步操作(比如与后端进行的一些交互)
                </p>
                <p><code>Mutations</code>:
                    <code>actions</code>之后可以通过<code>commit</code>让<code>mutations</code>进行修改<code>state</code>数据。如无异步操作,可直接进行操作。<code>mutations</code>是唯一能修改<code>state</code>的途经。
                </p>
                <p><img src="https://vuex.vuejs.org/vuex.png" alt></p> <h4 id="vuex-使用场景："><a href="#vuex-使用场景："
                                                                                              aria-hidden="true"
                                                                                              class="header-anchor">#</a>
                    vuex 使用场景：</h4>
                <ol>
                    <li>多个组件间的状态和数据共享</li>
                    <li>路由间的复杂数据传递。</li>
                </ol>
                <h2 id="vue响应式原理-双向绑定"><a href="#vue响应式原理-双向绑定" aria-hidden="true" class="header-anchor">#</a>
                    Vue响应式原理(双向绑定)</h2>
                <h3 id="什么是双向绑定？"><a href="#什么是双向绑定？" aria-hidden="true" class="header-anchor">#</a> 什么是双向绑定？</h3>
                <p>数据可以改变页面，页面发生改变也能更新数据，这个就叫双向绑定。</p>
                <ul>
                    <li>(data-&gt;view) 用数据驱动页面，数据改变页面也会发生改变，</li>
                    <li>(view-&gt;data) 页面改变js中保存的变量做相应的改变，这个过程是自动的。</li>
                </ul>
                <h4 id="原理分析："><a href="#原理分析：" aria-hidden="true" class="header-anchor">#</a> 原理分析：</h4>
                <p><strong>(view-&gt;data)：</strong></p>
                <p>视图更新数据其实很简单，就是通过事件监听即可，比如<code>input</code>监听<code>input</code>事件就可以了。只不过框架执行了我们看不到。</p>
                <p><strong>(data-&gt;view)：</strong></p>
                <p>数据更新视图重点在于如何知道数据改变了，可以通过<code>Object.defineProperty( )</code>里设置<code>set</code>函数，当数据发生改变时就触发这个函数。一些更新的方法放在<code>set</code>内即可。
                </p>
                <p><img src="https://images2015.cnblogs.com/blog/938664/201705/938664-20170522230647382-1643499691.jpg"
                        alt></p> <h4 id="为什么要替换object-defineproperty？"><a href="#为什么要替换object-defineproperty？"
                                                                          aria-hidden="true" class="header-anchor">#</a>
                    为什么要替换Object.defineProperty？</h4>
                <p>Vue3.0将用原生Proxy替换Object.defineProperty</p>
                <ul>
                    <li>在Vue中，Object.defineProperty无法监控到数组下标的变化，导致直接通过数组的下标给数组设置值，不能实时响应。</li>
                    <li>Object.defineProperty只能劫持对象的属性,因此我们需要对每个对象的每个属性进行遍历。</li>
                </ul>
                <p><strong>Proxy</strong></p>
                <ul>
                    <li><p>Proxy是 ES6 中新增的一个特性，翻译过来意思是&quot;代理&quot;，用在这里表示由它来“代理”某些操作。 Proxy
                        让我们能够以简洁易懂的方式控制外部对对象的访问。其功能非常类似于设计模式中的代理模式。</p></li>
                    <li><p>Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。</p></li>
                    <li><p>使用 Proxy 的核心优点是可以交由它来处理一些非核心逻辑（如：读取或设置对象的某些属性前记录日志；设置对象的某些属性值前，需要验证；某些属性的访问控制等）。
                        从而可以让对象只需关注于核心逻辑，达到关注点分离，降低对象复杂度等目的。</p></li>
                </ul>
                <h2 id="vue简述"><a href="#vue简述" aria-hidden="true" class="header-anchor">#</a> vue简述</h2>
                <p>使用了<code>vue.js</code>之后， 我们就不需要在关注<code>DOM</code>操作， 只需要把精力放在数据即可。数据改变之后页面也会跟着改变。</p>
                <h2 id="mvvm模式"><a href="#mvvm模式" aria-hidden="true" class="header-anchor">#</a> MVVM模式</h2>
                <h3 id="mvp模式"><a href="#mvp模式" aria-hidden="true" class="header-anchor">#</a> MVP模式</h3>
                <p><img src="https://gitee.com/l544402029/res/raw/master/%E5%B0%8F%E4%B9%A6%E5%8C%A0/1580482042948.png"
                        alt="enter description here"></p>
                <p>首先我们要了解一下MVP模式， 代码分为三层。 Model层（也就是我们所说的数据层）， Presenter呈现层(业务逻辑相关的控制层)， View层（视图层，页面上的DOM展示）。</p>
                <p>当我们视图上的按钮被点击时， 控制器里的代码会执行， 控制器里面的代码负责了所有的业务逻辑。控制器可以去调用模型层去发<code>ajax</code>请求，或者控制器处理业务逻辑之后，
                    控制器会通过<code>DOM</code>操作再来改变视图。</p>
                <p>使用MVP模式我们大部分代码都是操作DOM。可以说是面向DOM开发。</p>
                <h3 id="mvvm模式-2"><a href="#mvvm模式-2" aria-hidden="true" class="header-anchor">#</a> MVVM模式</h3>
                <p><img src="https://gitee.com/l544402029/res/raw/master/%E5%B0%8F%E4%B9%A6%E5%8C%A0/1580482764644.png"
                        alt="enter description here"></p>
                <p>MVVM模式也有Model层来存储数据， 有View（视图层）来显示数据， 但是没有Presenter（控制器）层， 它有一个ViewModel层。ViewModel层不需要我们自己编写，
                    它是vue自带的。</p>
                <p>使用MVVM模式， 我们不需要关注ViewModel层， 它是vue内置的。我们只需要关注View层和Model层。对于MVVM模式， 编码的重点一部分是在View层， 一部分是在Model层。
                    使用这种模式大部分是在操作数据， DOM操作大大减少， 减少了代码量， 可是说是面向数据开发。</p>
                <p>在我们更改视图或者操作数据的时候，vm层会对相应数据或者视图进行更新，不进行dom操作，在vm层中的实现主要使用了es5的<code>object.definproperties</code>和虚拟dom的一个机制。
                </p> <h4 id="关键点："><a href="#关键点：" aria-hidden="true" class="header-anchor">#</a> 关键点：</h4>
                <ol>
                    <li>mvvm和mvp都是前端的设计模式，都是前后端分离后所特有的模式</li>
                    <li>前后端分离前是mvc模式，主要业务逻辑集中在后端，连页面的渲染都是在后端</li>
                    <li>mvvm和mvp其实都是取代了mvc中的v，即后端不需要渲染页面了，而是把需要渲染给页面的数据以json形式传给前端mvvm或mvp中的m，vm或p再把这些数据传给v进行页面渲染</li>
                    <li>由于前端渲染会降低SEO，所以网站首页可以采取后端渲染</li>
                </ol>
                <h2 id="组件"><a href="#组件" aria-hidden="true" class="header-anchor">#</a> 组件</h2>
                <p>组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。</p>
                <h3 id="组件间传值"><a href="#组件间传值" aria-hidden="true" class="header-anchor">#</a> 组件间传值</h3> <h4
                        id="子组件向父组件传值"><a href="#子组件向父组件传值" aria-hidden="true" class="header-anchor">#</a> 子组件向父组件传值
                </h4>
                <p><img src="https://gitee.com/l544402029/res/raw/master/%E5%B0%8F%E4%B9%A6%E5%8C%A0/1580486002362.png"
                        alt="enter description here"></p>
                <p>在子组件接受父组件传过来的值时， 只能用但是不能来修改。 之所以有这样一个单向数据流的概念， 是因为父组件传过来的值有可能被其他组件使用。你修改了这个子组件的数据， 不仅影响这个组件，
                    有可能对其他组件造成影响。</p> <h4 id="非父子组件传值"><a href="#非父子组件传值" aria-hidden="true" class="header-anchor">#</a>
                    非父子组件传值</h4>
                <p><img src="https://gitee.com/l544402029/res/raw/master/%E5%B0%8F%E4%B9%A6%E5%8C%A0/1580568788281.png"
                        alt="enter description here"></p>
                <h3 id="vue实例"><a href="#vue实例" aria-hidden="true" class="header-anchor">#</a> vue实例</h3> <h4
                        id="数据与方法"><a href="#数据与方法" aria-hidden="true" class="header-anchor">#</a> 数据与方法</h4>
                <p>当数据改变时，视图会进行重渲染。<strong>值得注意的是只有当实例被创建时就已经存在于 data 中的属性才是响应式的。</strong> 也就是说如果你添加一个新的属性将不会触发任何视图的更新。
                </p>
                <p>如果你知道你会在晚些时候需要一个属性，但是一开始它为空或不存在，那么你仅需要设置一些初始值。</p> <h4 id="生命周期"><a href="#生命周期" aria-hidden="true"
                                                                                       class="header-anchor">#</a> 生命周期
                </h4>
                <p><img src="https://cn.vuejs.org/images/lifecycle.png" alt="enter description here"></p>
                <p>生命周期函数就是vue实例在某一个时间点自动执行的函数。</p>
                <p>生命周期钩子的 this 上下文指向调用它的 Vue 实例。</p>
                <blockquote><p>不要在选项属性或回调上使用箭头函数，比如 created: () =&gt; console.log(this.a) 或 vm.$watch('a', newValue =&gt;
                    this.myMethod())。因为箭头函数并没有 this，this 会作为变量一直向上级词法作用域查找，直至找到为止，经常导致 Uncaught TypeError: Cannot read
                    property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。</p></blockquote>
                <h4 id="计算属性，-方法和侦听器"><a href="#计算属性，-方法和侦听器" aria-hidden="true" class="header-anchor">#</a> 计算属性，
                    方法和侦听器</h4> <h5 id="计算属性"><a href="#计算属性" aria-hidden="true" class="header-anchor">#</a> 计算属性</h5>
                <p><img src="https://gitee.com/l544402029/res/raw/master/%E5%B0%8F%E4%B9%A6%E5%8C%A0/1580542616794.png"
                        alt="enter description here"></p>
                <p>计算属性拥有缓存机制， 在计算所需要的的变量没有变化时会一直使用， 不会进行更新。 只有当需要的变量发生变化才会进行更新。</p>
                <p>计算属性，方法， 侦听器都可以使用的情况， 我们应该优先使用计算属性, 性能更高。</p> <h5 id="方法"><a href="#方法" aria-hidden="true"
                                                                                class="header-anchor">#</a> 方法</h5>
                <p><img src="https://gitee.com/l544402029/res/raw/master/%E5%B0%8F%E4%B9%A6%E5%8C%A0/1580542836843.png"
                        alt="enter description here"></p>
                <p>方法没有缓存机制， 每次都会进行更新。</p> <h5 id="侦听器"><a href="#侦听器" aria-hidden="true" class="header-anchor">#</a>
                    侦听器</h5>
                <p><img src="https://gitee.com/l544402029/res/raw/master/%E5%B0%8F%E4%B9%A6%E5%8C%A0/1580543213321.png"
                        alt="enter description here"></p>
                <p>侦听器会在监听的变量发生变化时更新数据。</p> <h4 id="vue条件渲染"><a href="#vue条件渲染" aria-hidden="true"
                                                                class="header-anchor">#</a> vue条件渲染</h4> <h5
                        id="key值得作用"><a href="#key值得作用" aria-hidden="true" class="header-anchor">#</a> key值得作用</h5>
                <p><img src="https://gitee.com/l544402029/res/raw/master/%E5%B0%8F%E4%B9%A6%E5%8C%A0/1580546704958.png"
                        alt="enter description here"></p>
                <p>如果加上<code>key</code>值， vue就知道它是页面上唯一的元素。 如果两个元素<code>key</code>值不同， 他就不会复用之前的元素。</p>
                <h3 id="模板语法"><a href="#模板语法" aria-hidden="true" class="header-anchor">#</a> 模板语法</h3> <h4 id="动态参数"><a
                        href="#动态参数" aria-hidden="true" class="header-anchor">#</a> 动态参数</h4>
                <p>在 DOM 中使用模板时 (直接在一个 HTML 文件里撰写模板)，还需要避免使用大写字符来命名键名，因为浏览器会把 attribute 名全部强制转为小写：</p>
                <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!--
在 DOM 中使用模板时这段代码会被转换为 `v-bind:[someattr]`。
除非在实例中有一个名为“someattr”的 property，否则代码不会工作。
--&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span
        class="token attr-name"><span class="token namespace">v-bind:</span>[someAttr]</span><span
        class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>value<span
        class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span> ... <span
                            class="token tag"><span class="token tag"><span
                            class="token punctuation">&lt;/</span>a</span><span
                            class="token punctuation">&gt;</span></span>
</code></pre>
                </div>
                <h3 id="列表渲染"><a href="#列表渲染" aria-hidden="true" class="header-anchor">#</a> 列表渲染</h3>
                <p>有时你可能需要为已有对象赋值多个新属性，比如使用 Object.assign() 或
                    _.extend()。在这种情况下，你应该用两个对象的属性创建一个新的对象。所以，如果你想添加新的响应式属性，不要像这样：</p>
                <div class="language-js extra-class"><pre class="language-js"><code>Object<span
                        class="token punctuation">.</span><span class="token function">assign</span><span
                        class="token punctuation">(</span>vm<span class="token punctuation">.</span>userProfile<span
                        class="token punctuation">,</span> <span class="token punctuation">{</span>
  age<span class="token punctuation">:</span> <span class="token number">27</span><span
                            class="token punctuation">,</span>
  favoriteColor<span class="token punctuation">:</span> <span class="token string">'Vue Green'</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre>
                </div>
                <p>你应该这样做：</p>
                <div class="language-js extra-class"><pre class="language-js"><code>vm<span
                        class="token punctuation">.</span>userProfile <span class="token operator">=</span> Object<span
                        class="token punctuation">.</span><span class="token function">assign</span><span
                        class="token punctuation">(</span><span class="token punctuation">{</span><span
                        class="token punctuation">}</span><span class="token punctuation">,</span> vm<span
                        class="token punctuation">.</span>userProfile<span class="token punctuation">,</span> <span
                        class="token punctuation">{</span>
  age<span class="token punctuation">:</span> <span class="token number">27</span><span
                            class="token punctuation">,</span>
  favoriteColor<span class="token punctuation">:</span> <span class="token string">'Vue Green'</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre>
                </div>
                <h2 id="组件-2"><a href="#组件-2" aria-hidden="true" class="header-anchor">#</a> 组件</h2> <h4 id="关键点"><a
                        href="#关键点" aria-hidden="true" class="header-anchor">#</a> 关键点</h4>
                <ul>
                    <li>组件的名字一定不要相同！</li>
                </ul>
                <h2 id="生命周期-2"><a href="#生命周期-2" aria-hidden="true" class="header-anchor">#</a> 生命周期</h2>
                <p>生命周期主要分三个阶段 创建， 更新， 销毁。</p> <h4 id="创建阶段"><a href="#创建阶段" aria-hidden="true"
                                                                class="header-anchor">#</a> 创建阶段</h4>
                <p>只使用一次</p>
                <p><img src="https://gitee.com/l544402029/res/raw/master/%E5%B0%8F%E4%B9%A6%E5%8C%A0/1580623108306.png"
                        alt="enter description here"></p> <h4 id="更新阶段"><a href="#更新阶段" aria-hidden="true"
                                                                           class="header-anchor">#</a> 更新阶段</h4>
                <p>多次使用</p>
                <p><img src="https://gitee.com/l544402029/res/raw/master/%E5%B0%8F%E4%B9%A6%E5%8C%A0/1580623259343.png"
                        alt="enter description here"></p> <h4 id="销毁阶段"><a href="#销毁阶段" aria-hidden="true"
                                                                           class="header-anchor">#</a> 销毁阶段</h4>
                <p><img src="https://gitee.com/l544402029/res/raw/master/%E5%B0%8F%E4%B9%A6%E5%8C%A0/1580623636681.png"
                        alt="enter description here"></p>
                <h3 id="vuex-2"><a href="#vuex-2" aria-hidden="true" class="header-anchor">#</a> vuex</h3>
                <p><img src="https://gitee.com/l544402029/res/raw/master/%E5%B0%8F%E4%B9%A6%E5%8C%A0/1580638665713.png"
                        alt="enter description here"></p> <h4 id="核心概念"><a href="#核心概念" aria-hidden="true"
                                                                           class="header-anchor">#</a> 核心概念</h4>
                <p><img src="https://gitee.com/l544402029/res/raw/master/%E5%B0%8F%E4%B9%A6%E5%8C%A0/1580661265615.png"
                        alt="enter description here"></p> <h4 id="底层原理"><a href="#底层原理" aria-hidden="true"
                                                                           class="header-anchor">#</a> 底层原理</h4>
                <p><img src="https://gitee.com/l544402029/res/raw/master/%E5%B0%8F%E4%B9%A6%E5%8C%A0/1580661290684.png"
                        alt="enter description here"></p> <h4 id="最佳实现"><a href="#最佳实现" aria-hidden="true"
                                                                           class="header-anchor">#</a> 最佳实现</h4>
                <h3 id="vue-router"><a href="#vue-router" aria-hidden="true" class="header-anchor">#</a> Vue Router</h3>
                <h4 id="解决了什么问题？"><a href="#解决了什么问题？" aria-hidden="true" class="header-anchor">#</a> 解决了什么问题？</h4>
                <p><img src="https://gitee.com/l544402029/res/raw/master/%E5%B0%8F%E4%B9%A6%E5%8C%A0/1580662599120.png"
                        alt="enter description here"></p> <h4 id="使用方式"><a href="#使用方式" aria-hidden="true"
                                                                           class="header-anchor">#</a> 使用方式</h4>
                <p><img src="https://gitee.com/l544402029/res/raw/master/%E5%B0%8F%E4%B9%A6%E5%8C%A0/1580662660304.png"
                        alt="enter description here"></p> <h4 id="引入"><a href="#引入" aria-hidden="true"
                                                                         class="header-anchor">#</a> 引入</h4>
                <p><img src="https://gitee.com/l544402029/res/raw/master/%E5%B0%8F%E4%B9%A6%E5%8C%A0/1580716451260.png"
                        alt="enter description here"></p> <h4 id="路由类型"><a href="#路由类型" aria-hidden="true"
                                                                           class="header-anchor">#</a> 路由类型</h4>
                <p><img src="https://gitee.com/l544402029/res/raw/master/%E5%B0%8F%E4%B9%A6%E5%8C%A0/1580717294746.png"
                        alt="enter description here"></p>
                <h2 id="搭建项目"><a href="#搭建项目" aria-hidden="true" class="header-anchor">#</a> 搭建项目</h2>
                <p>首先需要安装node，git</p>
                <p>创建码云仓库</p> <h4 id="生成公钥"><a href="#生成公钥" aria-hidden="true" class="header-anchor">#</a> 生成公钥</h4>
                <div class="language- extra-class"><pre class="language-text"><code>ssh-keygen -t rsa -C &quot;544402029@qq.com&quot;
</code></pre>
                </div>
                <p>和码云注册邮箱地址一样</p> <h4 id="获取公钥"><a href="#获取公钥" aria-hidden="true" class="header-anchor">#</a> 获取公钥
                </h4>
                <div class="language- extra-class"><pre class="language-text"><code>cat ~/.ssh/id_rsa.pub
</code></pre>
                </div>
                <h4 id="添加公钥"><a href="#添加公钥" aria-hidden="true" class="header-anchor">#</a> 添加公钥</h4>
                <p><img src="https://gitee.com/l544402029/res/raw/master/%E5%B0%8F%E4%B9%A6%E5%8C%A0/1581664853612.png"
                        alt="enter description here"></p> <h4 id="克隆仓库"><a href="#克隆仓库" aria-hidden="true"
                                                                           class="header-anchor">#</a> 克隆仓库</h4>
                <div class="language- extra-class"><pre class="language-text"><code>git clone git@gitee.com:l544402029/Travel.git
</code></pre>
                </div>
                <h4 id="创建vue"><a href="#创建vue" aria-hidden="true" class="header-anchor">#</a> 创建vue</h4>
                <p>安装脚手架</p>
                <div class="language- extra-class"><pre class="language-text"><code>npm install -g @vue/cli
</code></pre>
                </div>
                <p>创建vue项目</p>
                <div class="language- extra-class"><pre class="language-text"><code>vue create Travel
</code></pre>
                </div>
                <h4 id="推送到远程仓库"><a href="#推送到远程仓库" aria-hidden="true" class="header-anchor">#</a> 推送到远程仓库</h4>
                <div class="language- extra-class"><pre class="language-text"><code>git add .
git commit -m 'init project'
git push
</code></pre>
                </div>
                <h2 id="移动端布局"><a href="#移动端布局" aria-hidden="true" class="header-anchor">#</a> 移动端布局</h2>
                <p>一般移动端我们会通过rem来布局， 如果设计师给我们的设计图是750px， 那么这就是iphone6的像素。这是一个2倍图。</p>
                <p>我们可以给html标签文字大小设置50px， 这样计算的时候如果设计图是86px， 那么我们只需要写0.86rem就可以了。直接用86/100就可以了。</p>
                <p>因为是两倍图， 我们要实际尺寸的就要100/2。 100除以2就是50， 所以字体设置50px。</p>
                <h3 id="本地模拟数据"><a href="#本地模拟数据" aria-hidden="true" class="header-anchor">#</a> 本地模拟数据</h3>
                <p>我们可以在public下创建static文件夹， 在static内创建mock。 mock里创建index.json。然后就可以写自己想要的数据了。</p>
                <p>我们尽量在文件内不要改线上的配置， 就是说请求的地址还按照线上写， 在本地启服务器的时候， 我们可以做一个转发， 如下：</p>
                <p>vue.config.js</p>
                <div class="language-js extra-class"><pre class="language-js"><code>module<span
                        class="token punctuation">.</span>exports <span class="token operator">=</span> <span
                        class="token punctuation">{</span>
  devServer<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    proxy<span class="token punctuation">:</span> <span class="token punctuation">{</span>
      <span class="token string">&quot;/api&quot;</span><span class="token punctuation">:</span> <span
                            class="token punctuation">{</span>
        target<span class="token punctuation">:</span> <span
                            class="token string">&quot;http://localhost:8080&quot;</span><span
                            class="token punctuation">,</span>
        ws<span class="token punctuation">:</span> <span class="token boolean">true</span><span
                            class="token punctuation">,</span>
        changeOrigin<span class="token punctuation">:</span> <span class="token boolean">true</span><span
                            class="token punctuation">,</span>
        pathRewrite<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span
                            class="token string">&quot;^/api&quot;</span><span class="token punctuation">:</span> <span
                            class="token string">&quot;/static/mock&quot;</span> <span
                            class="token punctuation">}</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre>
                </div>
                <p>遇到请求地址是<code>/api</code>可以自动转发到<code>/static/mock</code>。</p>
                <h3 id="项目联调"><a href="#项目联调" aria-hidden="true" class="header-anchor">#</a> 项目联调</h3>
                <p>把后端请求的地址填写在这里即可</p>
                <p><img src="https://gitee.com/l544402029/res/raw/master/%E5%B0%8F%E4%B9%A6%E5%8C%A0/1581876970902.png"
                        alt="enter description here"></p>
                <h3 id="jsonp原理"><a href="#jsonp原理" aria-hidden="true" class="header-anchor">#</a> jsonp原理</h3>
                <p>jsonp为什么能跨域？</p>
                <ol>
                    <li>jsonp发送的挺不是ajax请求。</li>
                    <li>jsonp动态创建一个<code>script</code>标签， 因为<code>script</code>标签是没有同源策略限制的，是可以跨域的。</li>
                    <li>把这个<code>script</code>标签的src指向我们请求的服务端地址， 这个地址会携带一个参数：callback。 一个回调函数 ，
                        服务端会把数据通过这个回调函数返回给客户端，但是客户端没有这个函数怎么接受呢？ 所以在发送请求之前，要在全局（window）注册这样一个方法， 利用这个方法， 来获得数据。
                    </li>
                    <li>这个回调函数名需要跟服务器约定好， 是一致的。</li>
                </ol>
                <h3 id="mixin"><a href="#mixin" aria-hidden="true" class="header-anchor">#</a> mixin</h3>
                <p>如果我们的业务代码内有很多相同的逻辑代码， 这时候我们可以考虑使用mixin， 它可以做到让我们写一套代码在多个地方使用。</p>
                <p>创建mixin.js</p>
                <div class="language-js extra-class"><pre class="language-js"><code><span
                        class="token keyword">import</span> <span class="token punctuation">{</span> mapGetters<span
                        class="token punctuation">,</span> mapMutations<span class="token punctuation">,</span> mapActions <span
                        class="token punctuation">}</span> <span class="token keyword">from</span> <span
                        class="token string">'vuex'</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> playMode <span
                            class="token punctuation">}</span> <span class="token keyword">from</span> <span
                            class="token string">'common/js/config'</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> shuffle <span
                            class="token punctuation">}</span> <span class="token keyword">from</span> <span
                            class="token string">'common/js/util'</span>

<span class="token keyword">export</span> <span class="token keyword">const</span> playlistMixin <span
                            class="token operator">=</span> <span class="token punctuation">{</span>
  computed<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    <span class="token operator">...</span><span class="token function">mapGetters</span><span
                            class="token punctuation">(</span><span class="token punctuation">[</span>
      <span class="token string">'playlist'</span>
    <span class="token punctuation">]</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">mounted</span> <span class="token punctuation">(</span><span
                            class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">handlePlaylist</span><span
                            class="token punctuation">(</span><span class="token keyword">this</span><span
                            class="token punctuation">.</span>playlist<span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">activated</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span
                            class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">handlePlaylist</span><span
                            class="token punctuation">(</span><span class="token keyword">this</span><span
                            class="token punctuation">.</span>playlist<span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  watch<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    <span class="token function">playlist</span> <span class="token punctuation">(</span><span class="token parameter">newVal</span><span
                            class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">handlePlaylist</span><span
                            class="token punctuation">(</span>newVal<span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  methods<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    <span class="token function">handlePlaylist</span> <span class="token punctuation">(</span><span
                            class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span
                            class="token punctuation">(</span><span class="token string">'component must implement handlePlaylist method'</span><span
                            class="token punctuation">)</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
                </div>
                <h4 id="在业务代码内引入此文件"><a href="#在业务代码内引入此文件" aria-hidden="true" class="header-anchor">#</a> 在业务代码内引入此文件
                </h4>
                <div class="language-vue extra-class"><pre class="language-vue"><code>import {playlistMixin} from 'common/js/mixin'

export default {
	mixins: [playlistMixin],
}
</code></pre>
                </div>
                <p>这样做就可以把业务代码和playlistMixin进行融合。 如果组件内有相同方法， 会覆盖掉mixin中的方法。</p>
                <h3 id="需要两个异步的数据同时返回"><a href="#需要两个异步的数据同时返回" aria-hidden="true" class="header-anchor">#</a>
                    需要两个异步的数据同时返回</h3>
                <p>如果需要两个数据同时返回， 如<code>better-scroll</code>组件需要data数据来撑起高度， 这时候我们可以考虑把两个数据写成计算属性。 当两个数据发生变化了也会更新计算属性，
                    这时候就可以达到我们的目的。</p>
                <h3 id="防止子元素冒泡"><a href="#防止子元素冒泡" aria-hidden="true" class="header-anchor">#</a> 防止子元素冒泡</h3>
                <p>可以在父元素点击事件的子元素下增加一个事件点击事件<code>@click.stop</code>。这样就可以防止子元素冒泡问题了。</p>
                <h3 id="vuex的使用"><a href="#vuex的使用" aria-hidden="true" class="header-anchor">#</a> vuex的使用</h3>
                <p>首先我们可以在store文件夹下创建index.js作为总入口。 引入4个文件。action.js, getter.js, mutation.js, state.js。</p>
                <p>其中state用来存放数据， getter用来获取数据， 它相当于是一个计算属性。
                    mutation修改数据， action可以异步的操作数据， 还可以打包mutation的修改。</p>
                <p>index.js</p>
                <div class="language-js extra-class"><pre class="language-js"><code><span
                        class="token keyword">import</span> Vue <span class="token keyword">from</span> <span
                        class="token string">'vue'</span>
<span class="token keyword">import</span> Vuex <span class="token keyword">from</span> <span
                            class="token string">'vuex'</span>
<span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> actions <span
                            class="token keyword">from</span> <span class="token string">'./action'</span>
<span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> getters <span
                            class="token keyword">from</span> <span class="token string">'./getters'</span>
<span class="token keyword">import</span> state <span class="token keyword">from</span> <span class="token string">'./state'</span>
<span class="token keyword">import</span> mutations <span class="token keyword">from</span> <span class="token string">'./mutations'</span>
<span class="token keyword">import</span> createLogger <span class="token keyword">from</span> <span
                            class="token string">'vuex/dist/logger'</span>

Vue<span class="token punctuation">.</span><span class="token function">use</span><span
                            class="token punctuation">(</span>Vuex<span class="token punctuation">)</span>

<span class="token keyword">const</span> debug <span class="token operator">=</span> process<span
                            class="token punctuation">.</span>env<span class="token punctuation">.</span><span
                            class="token constant">NODE_ENV</span> <span class="token operator">!==</span> <span
                            class="token string">'production'</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span
                            class="token keyword">new</span> <span class="token class-name">Vuex<span
                            class="token punctuation">.</span>Store</span><span class="token punctuation">(</span><span
                            class="token punctuation">{</span>
  state<span class="token punctuation">,</span>
  getters<span class="token punctuation">,</span>
  actions<span class="token punctuation">,</span>
  mutations<span class="token punctuation">,</span>
  strict<span class="token punctuation">:</span> debug<span class="token punctuation">,</span>
  plugins<span class="token punctuation">:</span> debug <span class="token operator">?</span> <span
                            class="token punctuation">[</span><span class="token function">createLogger</span><span
                            class="token punctuation">(</span><span class="token punctuation">)</span><span
                            class="token punctuation">]</span> <span class="token punctuation">:</span> <span
                            class="token punctuation">[</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre>
                </div>
                <p>state.js</p>
                <div class="language-js extra-class"><pre class="language-js"><code><span
                        class="token keyword">import</span> <span class="token punctuation">{</span>playMode<span
                        class="token punctuation">}</span> <span class="token keyword">from</span> <span
                        class="token string">'common/js/config'</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span>loadSearch<span
                            class="token punctuation">}</span> <span class="token keyword">from</span> <span
                            class="token string">'common/js/cache'</span>

<span class="token keyword">const</span> state <span class="token operator">=</span> <span
                            class="token punctuation">{</span>
  singer <span class="token punctuation">:</span> <span class="token punctuation">{</span><span
                            class="token punctuation">}</span><span class="token punctuation">,</span>
  playing<span class="token punctuation">:</span> <span class="token boolean">false</span><span
                            class="token punctuation">,</span>
  fullScreen<span class="token punctuation">:</span> <span class="token boolean">false</span><span
                            class="token punctuation">,</span>
  playlist<span class="token punctuation">:</span> <span class="token punctuation">[</span><span
                            class="token punctuation">]</span><span class="token punctuation">,</span>
  sequenceList<span class="token punctuation">:</span> <span class="token punctuation">[</span><span
                            class="token punctuation">]</span><span class="token punctuation">,</span>
  mode<span class="token punctuation">:</span> playMode<span class="token punctuation">.</span>sequence<span
                            class="token punctuation">,</span>
  currentIndex<span class="token punctuation">:</span> <span class="token operator">-</span><span
                            class="token number">1</span><span class="token punctuation">,</span>
  disc<span class="token punctuation">:</span> <span class="token punctuation">{</span><span
                            class="token punctuation">}</span><span class="token punctuation">,</span>
  topList<span class="token punctuation">:</span> <span class="token punctuation">{</span><span
                            class="token punctuation">}</span><span class="token punctuation">,</span>
  searchHistory<span class="token punctuation">:</span> <span class="token function">loadSearch</span><span
                            class="token punctuation">(</span><span class="token punctuation">)</span><span
                            class="token punctuation">,</span>
  playHistory<span class="token punctuation">:</span> <span class="token punctuation">[</span><span
                            class="token punctuation">]</span><span class="token punctuation">,</span>
  favoriteList<span class="token punctuation">:</span> <span class="token punctuation">[</span><span
                            class="token punctuation">]</span>
<span class="token punctuation">}</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> state
</code></pre>
                </div>
                <p>getter.js</p>
                <div class="language-js extra-class"><pre class="language-js"><code><span
                        class="token keyword">export</span> <span class="token keyword">const</span> <span
                        class="token function-variable function">singer</span> <span
                        class="token operator">=</span> <span class="token parameter">state</span> <span
                        class="token operator">=&gt;</span> state<span class="token punctuation">.</span>singer

<span class="token keyword">export</span> <span class="token keyword">const</span> <span
                            class="token function-variable function">playing</span> <span
                            class="token operator">=</span> <span class="token parameter">state</span> <span
                            class="token operator">=&gt;</span> state<span class="token punctuation">.</span>playing

<span class="token keyword">export</span> <span class="token keyword">const</span> <span
                            class="token function-variable function">fullScreen</span> <span
                            class="token operator">=</span> <span class="token parameter">state</span> <span
                            class="token operator">=&gt;</span> state<span class="token punctuation">.</span>fullScreen

<span class="token keyword">export</span> <span class="token keyword">const</span> <span
                            class="token function-variable function">playlist</span> <span
                            class="token operator">=</span> <span class="token parameter">state</span> <span
                            class="token operator">=&gt;</span> state<span class="token punctuation">.</span>playlist

<span class="token keyword">export</span> <span class="token keyword">const</span> <span
                            class="token function-variable function">sequenceList</span> <span
                            class="token operator">=</span> <span class="token parameter">state</span> <span
                            class="token operator">=&gt;</span> state<span class="token punctuation">.</span>sequenceList

<span class="token keyword">export</span> <span class="token keyword">const</span> <span
                            class="token function-variable function">mode</span> <span
                            class="token operator">=</span> <span class="token parameter">state</span> <span
                            class="token operator">=&gt;</span> state<span class="token punctuation">.</span>mode

<span class="token keyword">export</span> <span class="token keyword">const</span> <span
                            class="token function-variable function">currentIndex</span> <span
                            class="token operator">=</span> <span class="token parameter">state</span> <span
                            class="token operator">=&gt;</span> state<span class="token punctuation">.</span>currentIndex

<span class="token keyword">export</span> <span class="token keyword">const</span> <span
                            class="token function-variable function">currentSong</span> <span
                            class="token operator">=</span> <span class="token punctuation">(</span><span
                            class="token parameter">state</span><span class="token punctuation">)</span> <span
                            class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> state<span class="token punctuation">.</span>playlist<span
                            class="token punctuation">[</span>state<span
                            class="token punctuation">.</span>currentIndex<span class="token punctuation">]</span> <span
                            class="token operator">||</span> <span class="token punctuation">{</span><span
                            class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">export</span> <span class="token keyword">const</span> <span
                            class="token function-variable function">playHistory</span> <span
                            class="token operator">=</span> <span class="token punctuation">(</span><span
                            class="token parameter">state</span><span class="token punctuation">)</span> <span
                            class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> state<span class="token punctuation">.</span>playHistory<span
                            class="token punctuation">.</span><span class="token function">map</span><span
                            class="token punctuation">(</span><span class="token punctuation">(</span><span
                            class="token parameter">song</span><span class="token punctuation">)</span> <span
                            class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token keyword">new</span> <span
                            class="token class-name">Song</span><span class="token punctuation">(</span>song<span
                            class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token keyword">export</span> <span class="token keyword">const</span> <span
                            class="token function-variable function">favoriteList</span> <span
                            class="token operator">=</span> <span class="token punctuation">(</span><span
                            class="token parameter">state</span><span class="token punctuation">)</span> <span
                            class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> state<span class="token punctuation">.</span>favoriteList<span
                            class="token punctuation">.</span><span class="token function">map</span><span
                            class="token punctuation">(</span><span class="token punctuation">(</span><span
                            class="token parameter">song</span><span class="token punctuation">)</span> <span
                            class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token keyword">new</span> <span
                            class="token class-name">Song</span><span class="token punctuation">(</span>song<span
                            class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token keyword">export</span> <span class="token keyword">const</span> <span
                            class="token function-variable function">disc</span> <span
                            class="token operator">=</span> <span class="token punctuation">(</span><span
                            class="token parameter">state</span><span class="token punctuation">)</span> <span
                            class="token operator">=&gt;</span> state<span class="token punctuation">.</span>disc

<span class="token keyword">export</span> <span class="token keyword">const</span> <span
                            class="token function-variable function">topList</span> <span
                            class="token operator">=</span> <span class="token punctuation">(</span><span
                            class="token parameter">state</span><span class="token punctuation">)</span> <span
                            class="token operator">=&gt;</span> state<span class="token punctuation">.</span>topList

<span class="token keyword">export</span> <span class="token keyword">const</span> <span
                            class="token function-variable function">searchHistory</span> <span
                            class="token operator">=</span> <span class="token punctuation">(</span><span
                            class="token parameter">state</span><span class="token punctuation">)</span> <span
                            class="token operator">=&gt;</span> state<span class="token punctuation">.</span>searchHistory

</code></pre>
                </div>
                <p>一般修改数据， 我们会创建一个js文件专门存放修改数据的变量名， 防止出错。</p>
                <p>mutation-types.js</p>
                <div class="language-js extra-class"><pre class="language-js"><code><span
                        class="token keyword">export</span> <span class="token keyword">const</span> <span
                        class="token constant">SET_SINGER</span> <span class="token operator">=</span> <span
                        class="token string">'SET_SINGER'</span>

<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token constant">SET_PLAYING_STATE</span> <span
                            class="token operator">=</span> <span class="token string">'SET_PLAYING_STATE'</span>

<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token constant">SET_FULL_SCREEN</span> <span
                            class="token operator">=</span> <span class="token string">'SET_FULL_SCREEN'</span>

<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token constant">SET_PLAYLIST</span> <span
                            class="token operator">=</span> <span class="token string">'SET_PLAYLIST'</span>

<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token constant">SET_SEQUENCE_LIST</span> <span
                            class="token operator">=</span> <span class="token string">'SET_SEQUENCE_LIST'</span>

<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token constant">SET_PLAY_MODE</span> <span
                            class="token operator">=</span> <span class="token string">'SET_PLAY_MODE'</span>

<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token constant">SET_CURRENT_INDEX</span> <span
                            class="token operator">=</span> <span class="token string">'SET_CURRENT_INDEX'</span>

<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token constant">SET_PLAY_HISTORY</span> <span
                            class="token operator">=</span> <span class="token string">'SET_PLAY_HISTORY'</span>

<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token constant">SET_FAVORITE_LIST</span> <span
                            class="token operator">=</span> <span class="token string">'SET_FAVORITE_LIST'</span>

<span class="token keyword">export</span> <span class="token keyword">const</span> <span
                            class="token constant">SET_DISC</span> <span class="token operator">=</span> <span
                            class="token string">'SET_DISC'</span>

<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token constant">SET_TOP_LIST</span> <span
                            class="token operator">=</span> <span class="token string">'SET_TOP_LIST'</span>

<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token constant">SET_SEARCH_HISTORY</span> <span
                            class="token operator">=</span> <span class="token string">'SET_SEARCH_HISTORY'</span>
</code></pre>
                </div>
                <p>mutations.js</p>
                <div class="language-js extra-class"><pre class="language-js"><code><span
                        class="token keyword">import</span> <span class="token operator">*</span> <span
                        class="token keyword">as</span> types <span class="token keyword">from</span> <span
                        class="token string">'./mutation-types'</span>

<span class="token keyword">const</span> mutations <span class="token operator">=</span> <span
                            class="token punctuation">{</span>
  <span class="token punctuation">[</span>types<span class="token punctuation">.</span><span class="token constant">SET_SINGER</span><span
                            class="token punctuation">]</span><span class="token punctuation">(</span>state<span
                            class="token punctuation">,</span> singer<span class="token punctuation">)</span> <span
                            class="token punctuation">{</span>
    state<span class="token punctuation">.</span>singer <span class="token operator">=</span> singer
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">[</span>types<span class="token punctuation">.</span><span class="token constant">SET_PLAYING_STATE</span><span
                            class="token punctuation">]</span> <span class="token punctuation">(</span>state<span
                            class="token punctuation">,</span> flag<span class="token punctuation">)</span> <span
                            class="token punctuation">{</span>
    state<span class="token punctuation">.</span>playing <span class="token operator">=</span> flag
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">[</span>types<span class="token punctuation">.</span><span class="token constant">SET_SEQUENCE_LIST</span><span
                            class="token punctuation">]</span><span class="token punctuation">(</span>state<span
                            class="token punctuation">,</span> flag<span class="token punctuation">)</span> <span
                            class="token punctuation">{</span>
    state<span class="token punctuation">.</span>playing <span class="token operator">=</span> flag
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">[</span>types<span class="token punctuation">.</span><span class="token constant">SET_FULL_SCREEN</span><span
                            class="token punctuation">]</span><span class="token punctuation">(</span>state<span
                            class="token punctuation">,</span> flag<span class="token punctuation">)</span> <span
                            class="token punctuation">{</span>
    state<span class="token punctuation">.</span>fullScreen <span class="token operator">=</span> flag
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">[</span>types<span class="token punctuation">.</span><span class="token constant">SET_PLAYLIST</span><span
                            class="token punctuation">]</span><span class="token punctuation">(</span>state<span
                            class="token punctuation">,</span> list<span class="token punctuation">)</span> <span
                            class="token punctuation">{</span>
    state<span class="token punctuation">.</span>playlist <span class="token operator">=</span> list
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">[</span>types<span class="token punctuation">.</span><span class="token constant">SET_SEQUENCE_LIST</span><span
                            class="token punctuation">]</span><span class="token punctuation">(</span>state<span
                            class="token punctuation">,</span> list<span class="token punctuation">)</span> <span
                            class="token punctuation">{</span>
    state<span class="token punctuation">.</span>sequenceList <span class="token operator">=</span> list
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">[</span>types<span class="token punctuation">.</span><span class="token constant">SET_PLAY_MODE</span><span
                            class="token punctuation">]</span><span class="token punctuation">(</span>state<span
                            class="token punctuation">,</span> mode<span class="token punctuation">)</span> <span
                            class="token punctuation">{</span>
    state<span class="token punctuation">.</span>mode <span class="token operator">=</span> mode
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">[</span>types<span class="token punctuation">.</span><span class="token constant">SET_CURRENT_INDEX</span><span
                            class="token punctuation">]</span><span class="token punctuation">(</span>state<span
                            class="token punctuation">,</span> index<span class="token punctuation">)</span> <span
                            class="token punctuation">{</span>
    state<span class="token punctuation">.</span>currentIndex <span class="token operator">=</span> index
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">[</span>types<span class="token punctuation">.</span><span class="token constant">SET_PLAY_HISTORY</span><span
                            class="token punctuation">]</span> <span class="token punctuation">(</span>state<span
                            class="token punctuation">,</span> history<span class="token punctuation">)</span> <span
                            class="token punctuation">{</span>
    state<span class="token punctuation">.</span>playHistory <span class="token operator">=</span> history
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">[</span>types<span class="token punctuation">.</span><span class="token constant">SET_FAVORITE_LIST</span><span
                            class="token punctuation">]</span> <span class="token punctuation">(</span>state<span
                            class="token punctuation">,</span> list<span class="token punctuation">)</span> <span
                            class="token punctuation">{</span>
    state<span class="token punctuation">.</span>favoriteList <span class="token operator">=</span> list
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">[</span>types<span class="token punctuation">.</span><span class="token constant">SET_DISC</span><span
                            class="token punctuation">]</span> <span class="token punctuation">(</span>state<span
                            class="token punctuation">,</span> disc<span class="token punctuation">)</span> <span
                            class="token punctuation">{</span>
    state<span class="token punctuation">.</span>disc <span class="token operator">=</span> disc
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">[</span>types<span class="token punctuation">.</span><span class="token constant">SET_TOP_LIST</span><span
                            class="token punctuation">]</span> <span class="token punctuation">(</span>state<span
                            class="token punctuation">,</span> topList<span class="token punctuation">)</span> <span
                            class="token punctuation">{</span>
    state<span class="token punctuation">.</span>topList <span class="token operator">=</span> topList
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">[</span>types<span class="token punctuation">.</span><span class="token constant">SET_SEARCH_HISTORY</span><span
                            class="token punctuation">]</span> <span class="token punctuation">(</span>state<span
                            class="token punctuation">,</span> history<span class="token punctuation">)</span> <span
                            class="token punctuation">{</span>
    
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> mutations

</code></pre>
                </div>
                <p>action.js</p>
                <div class="language-js extra-class"><pre class="language-js"><code><span
                        class="token keyword">import</span> <span class="token operator">*</span> <span
                        class="token keyword">as</span> types <span class="token keyword">from</span> <span
                        class="token string">'./mutation-types'</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> playMode <span
                            class="token punctuation">}</span> <span class="token keyword">from</span> <span
                            class="token string">'common/js/config'</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> shuffle <span
                            class="token punctuation">}</span> <span class="token keyword">from</span> <span
                            class="token string">'common/js/util'</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> saveSearch<span
                            class="token punctuation">,</span> clearSearch<span class="token punctuation">,</span> deleteSearch<span
                            class="token punctuation">,</span> savePlay<span class="token punctuation">,</span> saveFavorite<span
                            class="token punctuation">,</span> deleteFavorite <span
                            class="token punctuation">}</span> <span class="token keyword">from</span> <span
                            class="token string">'common/js/cache'</span>

<span class="token keyword">function</span> <span class="token function">findIndex</span> <span
                            class="token punctuation">(</span><span class="token parameter">list<span
                            class="token punctuation">,</span> song</span><span class="token punctuation">)</span> <span
                            class="token punctuation">{</span>
  <span class="token keyword">return</span> list<span class="token punctuation">.</span><span class="token function">findIndex</span><span
                            class="token punctuation">(</span><span class="token punctuation">(</span><span
                            class="token parameter">item</span><span class="token punctuation">)</span> <span
                            class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> item<span class="token punctuation">.</span>id <span
                            class="token operator">===</span> song<span class="token punctuation">.</span>id
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token keyword">export</span> <span class="token keyword">const</span> <span
                            class="token function-variable function">selectPlay</span> <span
                            class="token operator">=</span> <span class="token keyword">function</span> <span
                            class="token punctuation">(</span><span class="token parameter"><span
                            class="token punctuation">{</span>commit<span class="token punctuation">,</span> state<span
                            class="token punctuation">}</span><span class="token punctuation">,</span> <span
                            class="token punctuation">{</span>list<span class="token punctuation">,</span> index<span
                            class="token punctuation">}</span></span><span class="token punctuation">)</span> <span
                            class="token punctuation">{</span>
  <span class="token function">commit</span><span class="token punctuation">(</span>types<span
                            class="token punctuation">.</span><span class="token constant">SET_SEQUENCE_LIST</span><span
                            class="token punctuation">,</span> list<span class="token punctuation">)</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>state<span
                            class="token punctuation">.</span>mode <span class="token operator">===</span> playMode<span
                            class="token punctuation">.</span>random<span class="token punctuation">)</span> <span
                            class="token punctuation">{</span>
    <span class="token keyword">let</span> randomList <span class="token operator">=</span> <span
                            class="token function">shuffle</span><span class="token punctuation">(</span>list<span
                            class="token punctuation">)</span>
    <span class="token function">commit</span><span class="token punctuation">(</span>types<span
                            class="token punctuation">.</span><span class="token constant">SET_PLAYLIST</span><span
                            class="token punctuation">,</span> randomList<span class="token punctuation">)</span>
    index <span class="token operator">=</span> <span class="token function">findIndex</span><span
                            class="token punctuation">(</span>randomList<span
                            class="token punctuation">,</span> list<span class="token punctuation">[</span>index<span
                            class="token punctuation">]</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span> <span class="token keyword">else</span> <span
                            class="token punctuation">{</span>
    <span class="token function">commit</span><span class="token punctuation">(</span>types<span
                            class="token punctuation">.</span><span class="token constant">SET_PLAYLIST</span><span
                            class="token punctuation">,</span> list<span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
  <span class="token function">commit</span><span class="token punctuation">(</span>types<span
                            class="token punctuation">.</span><span class="token constant">SET_CURRENT_INDEX</span><span
                            class="token punctuation">,</span> index<span class="token punctuation">)</span>
  <span class="token function">commit</span><span class="token punctuation">(</span>types<span
                            class="token punctuation">.</span><span class="token constant">SET_FULL_SCREEN</span><span
                            class="token punctuation">,</span> <span class="token boolean">true</span><span
                            class="token punctuation">)</span>
  <span class="token function">commit</span><span class="token punctuation">(</span>types<span
                            class="token punctuation">.</span><span class="token constant">SET_PLAYING_STATE</span><span
                            class="token punctuation">,</span> <span class="token boolean">true</span><span
                            class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token keyword">export</span> <span class="token keyword">const</span> <span
                            class="token function-variable function">randomPlay</span> <span
                            class="token operator">=</span> <span class="token keyword">function</span> <span
                            class="token punctuation">(</span><span class="token parameter"><span
                            class="token punctuation">{</span>commit<span class="token punctuation">}</span><span
                            class="token punctuation">,</span><span class="token punctuation">{</span>list<span
                            class="token punctuation">}</span></span><span class="token punctuation">)</span> <span
                            class="token punctuation">{</span>
  <span class="token function">commit</span><span class="token punctuation">(</span>types<span
                            class="token punctuation">.</span><span class="token constant">SET_PLAY_MODE</span><span
                            class="token punctuation">,</span>playMode<span
                            class="token punctuation">.</span>random<span class="token punctuation">)</span>
  <span class="token function">commit</span><span class="token punctuation">(</span>types<span
                            class="token punctuation">.</span><span class="token constant">SET_SEQUENCE_LIST</span><span
                            class="token punctuation">,</span>list<span class="token punctuation">)</span>
  <span class="token keyword">let</span> randomList <span class="token operator">=</span> <span class="token function">shuffle</span><span
                            class="token punctuation">(</span>list<span class="token punctuation">)</span>
  <span class="token function">commit</span><span class="token punctuation">(</span>types<span
                            class="token punctuation">.</span><span class="token constant">SET_PLAYLIST</span><span
                            class="token punctuation">,</span>randomList<span class="token punctuation">)</span>
  <span class="token function">commit</span><span class="token punctuation">(</span>types<span
                            class="token punctuation">.</span><span class="token constant">SET_CURRENT_INDEX</span><span
                            class="token punctuation">,</span><span class="token number">0</span><span
                            class="token punctuation">)</span>
  <span class="token function">commit</span><span class="token punctuation">(</span>types<span
                            class="token punctuation">.</span><span class="token constant">SET_FULL_SCREEN</span><span
                            class="token punctuation">,</span><span class="token boolean">true</span><span
                            class="token punctuation">)</span>
  <span class="token function">commit</span><span class="token punctuation">(</span>types<span
                            class="token punctuation">.</span><span class="token constant">SET_PLAYING_STATE</span><span
                            class="token punctuation">,</span><span class="token boolean">true</span><span
                            class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token keyword">export</span> <span class="token keyword">const</span> <span
                            class="token function-variable function">insertSong</span> <span
                            class="token operator">=</span> <span class="token keyword">function</span> <span
                            class="token punctuation">(</span><span class="token parameter"><span
                            class="token punctuation">{</span> commit<span
                            class="token punctuation">,</span> state <span class="token punctuation">}</span><span
                            class="token punctuation">,</span> song</span><span class="token punctuation">)</span> <span
                            class="token punctuation">{</span>
  <span class="token keyword">let</span> playlist <span class="token operator">=</span> state<span
                            class="token punctuation">.</span>playlist<span class="token punctuation">.</span><span
                            class="token function">slice</span><span class="token punctuation">(</span><span
                            class="token punctuation">)</span>
  <span class="token keyword">let</span> sequenceList <span class="token operator">=</span> state<span
                            class="token punctuation">.</span>sequenceList<span class="token punctuation">.</span><span
                            class="token function">slice</span><span class="token punctuation">(</span><span
                            class="token punctuation">)</span>
  <span class="token keyword">let</span> currentIndex <span class="token operator">=</span> state<span
                            class="token punctuation">.</span>currentIndex
  <span class="token comment">// 记录当前歌曲</span>
  <span class="token keyword">let</span> currentSong <span class="token operator">=</span> playlist<span
                            class="token punctuation">[</span>currentIndex<span class="token punctuation">]</span>
  <span class="token comment">// 查找当前列表中是否有待插入的歌曲并返回其索引</span>
  <span class="token keyword">let</span> fpIndex <span class="token operator">=</span> <span class="token function">findIndex</span><span
                            class="token punctuation">(</span>playlist<span class="token punctuation">,</span> song<span
                            class="token punctuation">)</span>
  <span class="token comment">// 因为是插入歌曲，所以索引+1</span>
  currentIndex<span class="token operator">++</span>
  <span class="token comment">// 插入这首歌到当前索引位置</span>
  playlist<span class="token punctuation">.</span><span class="token function">splice</span><span
                            class="token punctuation">(</span>currentIndex<span class="token punctuation">,</span> <span
                            class="token number">0</span><span class="token punctuation">,</span> song<span
                            class="token punctuation">)</span>
  <span class="token comment">// 如果已经包含了这首歌</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>fpIndex <span class="token operator">&gt;</span> <span
                            class="token operator">-</span><span class="token number">1</span><span
                            class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 如果当前插入的序号大于列表中的序号</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>currentIndex <span
                            class="token operator">&gt;</span> fpIndex<span class="token punctuation">)</span> <span
                            class="token punctuation">{</span>
      playlist<span class="token punctuation">.</span><span class="token function">splice</span><span
                            class="token punctuation">(</span>fpIndex<span class="token punctuation">,</span> <span
                            class="token number">1</span><span class="token punctuation">)</span>
      currentIndex<span class="token operator">--</span>
    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span
                            class="token punctuation">{</span>
      playlist<span class="token punctuation">.</span><span class="token function">splice</span><span
                            class="token punctuation">(</span>fpIndex <span class="token operator">+</span> <span
                            class="token number">1</span><span class="token punctuation">,</span> <span
                            class="token number">1</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>

  <span class="token keyword">let</span> currentSIndex <span class="token operator">=</span> <span
                            class="token function">findIndex</span><span
                            class="token punctuation">(</span>sequenceList<span class="token punctuation">,</span> currentSong<span
                            class="token punctuation">)</span> <span class="token operator">+</span> <span
                            class="token number">1</span>

  <span class="token keyword">let</span> fsIndex <span class="token operator">=</span> <span class="token function">findIndex</span><span
                            class="token punctuation">(</span>sequenceList<span
                            class="token punctuation">,</span> song<span class="token punctuation">)</span>

  sequenceList<span class="token punctuation">.</span><span class="token function">splice</span><span
                            class="token punctuation">(</span>currentSIndex<span
                            class="token punctuation">,</span> <span class="token number">0</span><span
                            class="token punctuation">,</span> song<span class="token punctuation">)</span>

  <span class="token keyword">if</span> <span class="token punctuation">(</span>fsIndex <span class="token operator">&gt;</span> <span
                            class="token operator">-</span><span class="token number">1</span><span
                            class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>currentSIndex <span
                            class="token operator">&gt;</span> fsIndex<span class="token punctuation">)</span> <span
                            class="token punctuation">{</span>
      sequenceList<span class="token punctuation">.</span><span class="token function">splice</span><span
                            class="token punctuation">(</span>fsIndex<span class="token punctuation">,</span> <span
                            class="token number">1</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span
                            class="token punctuation">{</span>
      sequenceList<span class="token punctuation">.</span><span class="token function">splice</span><span
                            class="token punctuation">(</span>fsIndex <span class="token operator">+</span> <span
                            class="token number">1</span><span class="token punctuation">,</span> <span
                            class="token number">1</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>

  <span class="token function">commit</span><span class="token punctuation">(</span>types<span
                            class="token punctuation">.</span><span class="token constant">SET_PLAYLIST</span><span
                            class="token punctuation">,</span> playlist<span class="token punctuation">)</span>
  <span class="token function">commit</span><span class="token punctuation">(</span>types<span
                            class="token punctuation">.</span><span class="token constant">SET_SEQUENCE_LIST</span><span
                            class="token punctuation">,</span> sequenceList<span class="token punctuation">)</span>
  <span class="token function">commit</span><span class="token punctuation">(</span>types<span
                            class="token punctuation">.</span><span class="token constant">SET_CURRENT_INDEX</span><span
                            class="token punctuation">,</span> currentIndex<span class="token punctuation">)</span>
  <span class="token function">commit</span><span class="token punctuation">(</span>types<span
                            class="token punctuation">.</span><span class="token constant">SET_FULL_SCREEN</span><span
                            class="token punctuation">,</span> <span class="token boolean">true</span><span
                            class="token punctuation">)</span>
  <span class="token function">commit</span><span class="token punctuation">(</span>types<span
                            class="token punctuation">.</span><span class="token constant">SET_PLAYING_STATE</span><span
                            class="token punctuation">,</span> <span class="token boolean">true</span><span
                            class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token keyword">export</span> <span class="token keyword">const</span> <span
                            class="token function-variable function">saveSearchHistory</span> <span
                            class="token operator">=</span> <span class="token keyword">function</span> <span
                            class="token punctuation">(</span><span class="token parameter"><span
                            class="token punctuation">{</span>commit<span class="token punctuation">}</span><span
                            class="token punctuation">,</span> query</span><span
                            class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token function">commit</span><span class="token punctuation">(</span>types<span
                            class="token punctuation">.</span><span
                            class="token constant">SET_SEARCH_HISTORY</span><span
                            class="token punctuation">,</span> <span class="token function">saveSearch</span><span
                            class="token punctuation">(</span>query<span class="token punctuation">)</span><span
                            class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token keyword">export</span> <span class="token keyword">const</span> <span
                            class="token function-variable function">deleteSearchHistory</span> <span
                            class="token operator">=</span> <span class="token keyword">function</span> <span
                            class="token punctuation">(</span><span class="token parameter"><span
                            class="token punctuation">{</span> commit <span class="token punctuation">}</span><span
                            class="token punctuation">,</span> query</span><span
                            class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token function">commit</span><span class="token punctuation">(</span>types<span
                            class="token punctuation">.</span><span
                            class="token constant">SET_SEARCH_HISTORY</span><span
                            class="token punctuation">,</span> <span class="token function">deleteSearch</span><span
                            class="token punctuation">(</span>query<span class="token punctuation">)</span><span
                            class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token keyword">export</span> <span class="token keyword">const</span> <span
                            class="token function-variable function">clearSearchHistory</span> <span
                            class="token operator">=</span> <span class="token keyword">function</span> <span
                            class="token punctuation">(</span><span class="token parameter"><span
                            class="token punctuation">{</span> commit <span
                            class="token punctuation">}</span></span><span class="token punctuation">)</span> <span
                            class="token punctuation">{</span>
  <span class="token function">commit</span><span class="token punctuation">(</span>types<span
                            class="token punctuation">.</span><span
                            class="token constant">SET_SEARCH_HISTORY</span><span
                            class="token punctuation">,</span> <span class="token function">clearSearch</span><span
                            class="token punctuation">(</span><span class="token punctuation">)</span><span
                            class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre>
                </div>
                <p>在我们的代码中可以这么使用：</p>
                <div class="language- extra-class"><pre class="language-text"><code>import {mapGetters, mapMutations} from 'vuex'


		...mapGetters([
			'fullScreen',
			'playlist',
			'currentSong',
			'playing',
			'currentIndex',
			'mode',
			'sequenceList'
		]),

	  back() {
        this.setFullScreen(false)
      },
	  
	  
      ...mapMutations({
        setFullScreen:'SET_FULL_SCREEN',
        setPlayingState:'SET_PLAYING_STATE',
        setCurrentIndex: 'SET_CURRENT_INDEX',
        setPlayMode: 'SET_PLAY_MODE',
        setPlaylist: 'SET_PLAYLIST'
      })

</code></pre>
                </div>
                <p>action</p>
                <div class="language- extra-class"><pre class="language-text"><code>	import {mapActions} from 'vuex'

	  this.selectPlay({
          list: this.songs,
          index
        })
		
      ...mapActions([
        'selectPlay',
        'randomPlay'
      ])
</code></pre>
                </div>
            </div>
            <div class="page-edit">
                <div class="edit-link"><a href="https://gitee.com/l544402029/blog/edit/gh-pages/vue/README.md"
                                          target="_blank" rel="noopener noreferrer">编辑此页</a>
                    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100"
                         width="15" height="15" class="icon outbound">
                        <path fill="currentColor"
                              d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path>
                        <polygon fill="currentColor"
                                 points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon>
                    </svg>
                </div> <!----></div> <!----> </div> <!----></div>
</div>
<script src="/blog/assets/js/app.55c22b96.js" defer></script>
<script src="/blog/assets/js/17.1e598d09.js" defer></script>
</body>
</html>
